// 颜色
// 颜色定义文件
@default: #bfbfbf;
@primary: #1890ff;
@info:    #13c2c2;
@success: #52c41a;
@warn:    #fadb14;
@danger:  #DE2022;

// 灰度定义
@white:       #ffffff;
@gray:        #CCCCCC;
@gray-light:  #e5e5e5;
@gray-darker: #666;
@gray-dark:   #999999;
@gray-222: #222;
@gray-888: #888;
@gray-aaa: #aaa;
@gray-ddd: #ddd;
@gray-444: #444;

// 其他颜色定义
// color variables
@black: #000;
@red: #FE3B30;
@blue: #4A90E2;
@orange: #ff976a;
@orange-dark: #ed6a0c;
@orange-light: #fffbe8;
@green: #4b0;
@yellow: #FFFAD3;
@yellow-new: #FFF0D8;
@yellow-font: #FF7D44;

// default colors
@text-color: #333;
@border-color: #eee;
@active-color: #e8e8e8;
@background-color: #F4F4F6;
@background-color-light: #fafafa;
@tip-color: #7D7D83;

// 业务相关颜色
@menu-list-item-btn-color: #9095A2;
// member-card & member-card-list
@member-card-bg-color: #F7EED5;
@member-card-disable-color: #DBE1E6;
@member-card-start-color: #F7E6C6;
@member-card-end-color: #F2DEB7;
@member-card-disable-start-color: #CDD5DD;
@member-card-disable-end-color: #C6CBD0;
@member-card-is-disable-tag-start-color: #98A2B0;
@member-card-is-disable-tag-end-color: #99A2AE;
@card-color: #AB7E35;
@member-card-border-raduis: @border-radius;
@product-bg-color: #F2F3F5;
@order-detail-collapse-color: #B98843;

// integral-shop
@integral-title: #C8A568;
@integral-value: #AB7E35;
// 字体
// 自定义字体
@font-face {
    font-family: 'number-font';
    src: url('//resource.bucket.biling.club/font/number-font.eot');
    src: url('//resource.bucket.biling.club/font/number-font.eot?#iefix') format('embedded-opentype'),
    url('//resource.bucket.biling.club/font/number-font.woff2') format('woff2'),
    url('//resource.bucket.biling.club/font/number-font.woff') format('woff'),
    url('//resource.bucket.biling.club/font/number-font.ttf') format('truetype'),
    url('//resource.bucket.biling.club/font/number-font.svg#iconfont') format('svg');
}
// 字体定义
@font-family: "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
@font-family-number: "number-font";
// 字号
@font-size-mini: 10px;
@font-size-sm:   12px;
@font-size:      14px;
@font-size-md:   16px;
@font-size-lg:   18px;

// 字体粗细
@font-weight:       400;
@font-weight-bold:  500;

// border 相关
@border: 1px solid @border-color;
@border-radius: 6px;
@border-radius-new: 12px;
.border-radius() {
    border-radius: @border-radius;
}

// 字体相应的方法
.font-size(@size) {
    font-size: @size * 1px;
    line-height: @size + 8px;
}
.font-size-mini() {
    font-size: @font-size-mini;
    line-height: @font-size-mini + 8px;
}
.font-size-sm() {
    font-size: @font-size-sm;
    line-height: @font-size-sm + 8px;
}
.font-size() {
    font-size: @font-size;
    line-height: @font-size + 8px;
}
.font-size-md() {
    font-size: @font-size-md;
    line-height: @font-size-md + 8px;
}
.font-size-lg() {
    font-size: @font-size-lg;
    line-height: @font-size-lg + 8px;
}
.font-weight(@weight) {
    font-weight: @weight;
}

// 长度、尺寸定义文件
// 基数
@_base_line: 4px;

@gap-sm: @_base_line;
@gap: @_base_line * 2;
@gap-md: @_base_line * 3;
@gap-lg: @_base_line * 4; 

// 方法
// flex
.flex() {
    display: flex;
}

.flex-column() {
    .flex();
    flex-direction: column;
}

.flex-center() {
    .flex();
    justify-content: center;
    align-items: center;
}
.flex-vertical-center() {
    .flex();
    align-items: center;
}

.flex-horizontal-center() {
    .flex();
    justify-content: center;
}

.flex-row-center() {
    .flex-center();
    flex-direction: row;
}

.flex-column-center() {
    .flex-center();
    flex-direction: column;
}
.flex-row-between() {
    .flex();
    flex-direction: row;
    justify-content: space-between;
}
.flex-column-between() {
    .flex();
    flex-direction: column;
    justify-content: space-between;
}

// text-align
.t-l() {
    text-align: left;
}

.t-r() {
    text-align: right;
}

.t-c() {
    text-align: center;
}

// margin & padding
.m(@num) {
    margin: @num * 1px;
}

.m-t(@num) {
    margin-top: @num * 1px;
}

.m-b(@num) {
    margin-bottom: @num * 1px;
}

.m-r(@num) {
    margin-right: @num * 1px;
}

.m-l(@num) {
    margin-left: @num * 1px;
}

.m-v(@num) {
    .m-t(@num);
    .m-b(@num);
}

.m-h(@num) {
    .m-l(@num);
    .m-r(@num);
}

.p(@num) {
    padding: @num * 1px;
}

.p-t(@num) {
    padding-top: @num * 1px;
}

.p-b(@num) {
    padding-bottom: @num * 1px;
}

.p-r(@num) {
    padding-right: @num * 1px;
}

.p-l(@num) {
    padding-left: @num * 1px;
}

.p-v(@num) {
    .p-t(@num);
    .p-b(@num);
}

.p-h(@num) {
    .p-l(@num);
    .p-r(@num);
}

@background-light-gray: @background-color;
@background-dark-gray: #666;
@background-gray: #999999;
@background-gray-yellow: #f9f6f6;
@background-light-orange: #ffecda;
@background-orange: #f8a95c;
@background-blue: #19a7f3;
@background-light-blue: #e3eefd;
@background-light-red: #ff9da1;
@background-red: #f86268;
@background-red-disabled: #FCC0C2;
@background-footer-gray: #f5f5f5;

@border-light-gray: #e8e8e8;
@border-gray: #b5b5b5;
@border-orange: #f8a95c;
@border-red: #f86268;

@font-color-orange: #f8a95c;
@font-color-yellow: #ffb300;
@font-color-red: #DE2022;
@font-color-green: #38cf34;
@font-color-dark-gray: #666;
@font-color-gray: #999;
@font-color-light-gray: #D3D6DA;
@font-color-blue: #19a7f3;
@font-color-dark-blue: #7b9dc5;

@footer-height: 60px;
@footer-height-number: 60;
@shopping-cart-background: #666;

@activity-bg-color: #FFECD3;

// Dark Mode 适配颜色
@black-bg-color: #121212;
@black-title-color: #EDEDED;

.text-overflow () {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-overflow-line (@num) {
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: @num;
    overflow: hidden;
}

.clearfix () {
    &:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }
}

.border-line() {
    position: relative;
    &::after {
        height: 1px;
        background-color: @border-color;
        position: absolute;
        bottom: 0;
        left: @gap-md;
        right: @gap-md;
        transform: scaleY(.5);
        content: '';
    }
}

.border-line(@color, @left, @right) {
    position: relative;
    &::after {
        height: 1px;
        background-color: @color;
        position: absolute;
        bottom: 0;
        left: @left;
        right: @right;
        transform: scaleY(.5);
        content: '';
    }
}

.border-line-top() {
    position: relative;
    &::after {
        height: 1px;
        background-color: @border-color;
        position: absolute;
        top: 0;
        left: @gap-md;
        right: @gap-md;
        transform: scaleY(.5);
        content: '';
    }
}

.border-line-top(@color, @left, @right) {
    position: relative;
    &::after {
        height: 1px;
        background-color: @color;
        position: absolute;
        top: 0;
        left: @left;
        right: @right;
        transform: scaleY(.5);
        content: '';
    }
}

// 滚动相关
.scroll-x() {
    overflow-x: scroll;
    overflow-y: hidden;
    display: block;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
.scroll-y() {
    overflow-x: hidden;
    overflow-y: scroll;
    display: block;
    -webkit-overflow-scrolling: touch;
}

.linear-right-top(@colorOne, @colorTwo) {
    background-image: linear-gradient(to right top, @colorOne, @colorTwo);
}
.linear-bottom(@colorOne, @colorTwo) {
    background-image: linear-gradient(to bottom, @colorOne, @colorTwo);
}
.linear-right-bottom(@colorOne, @colorTwo) {
    background-image: linear-gradient(to right bottom, @colorOne, @colorTwo);
}
.linear-right(@colorOne, @colorTwo) {
    background-image: linear-gradient(to right, @colorOne, @colorTwo);
}
.linear-background-color(@colorOne, @colorTwo) {
    background-image: linear-gradient(to right , @colorOne, @colorTwo);
}

.red-linear-bg() {
    .linear-right(#FE4F50, #E00524);
}

.package-product-icon-temp {
    width: 25px;
    height: 15px;
    font-size: 10px;
    .flex-center();
    color: #fff;
    background-color: @background-red;
    margin-right: 4px;
    &:after {
        content: '套餐';
    }
}
.keyframes(@name) {
    @keyframes @name {
        0% {
            transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
        }
        50% {
            transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
            -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
        }
        100% {
            transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        }
    }
}

.radius-and-shandow() {
    .m(@gap-md);
    overflow: hidden;
    border-radius: @border-radius;
    box-shadow: 0 4px 20px 0 rgba(27, 30, 37, 0.04);
}

.card-circle-border-h(@width, @v, @h, @color) {
    position: relative;
    &::before, &::after {
        content: '';
        position: absolute;
        width: @width;
        height: @width;
        background-color: @color;
        top: -@v;
        left: -@h;
        border-radius: @width;
    }
    &::after {
        left: auto;
        right: -@h;
    }
}
.card-circle-border-v(@width, @left) {

}

.mode-white() {
    &.white {
        background-color: #ffffff;
    }
    &.black {
        background-color: @black-bg-color;
        .title-color {
            color: @black-title-color !important;
        }
        .tip-color {
            color: rgba(125,125,131,0.7) !important;
        }
        .table-number-field {
            background-color: #333;
        }
        .black-btn-style {
            background-color: @black-bg-color;
        }
        .black-element-style {
            background-color: @black-bg-color;
        }
        .border-black-color {
            border-color: rgba(125,125,131,0.2) !important;
            &::after,
            &::before {
                background-color: rgba(125,125,131,0.2) !important;
            }
        }
        .van-cell {
            background-color: @black-bg-color !important;
        }
        .van-cell__title {
            color: @black-title-color;
        }
        .popup-name {
            color: @black-title-color !important;
        }
    }
}
.mode-gray() {
    &.white {
        background-color: #ffffff;
    }
    &.black {
        background-color: #333;
    }
}

.style-mode() {
    &.circle {
        border-radius: @border-radius-new;
    }
}
.style-mode-top() {
    &.circle {
        border-top-left-radius: @border-radius-new;
        border-top-right-radius: @border-radius-new;
    }
}
.style-mode-bottom() {
    &.circle {
        border-bottom-left-radius: @border-radius-new;
        border-bottom-right-radius: @border-radius-new;
    }
}

// 商城相关样式变量
@shop_base: 8px;
@shop-gap-sm: @shop_base / 2;
@shop-gap: @shop_base;
@shop-gap-md: @shop_base * 2;
@shop-gap-lg: @shop_base * 3;
@shop-bag-gap: 12px;
@shop-border-radius: 6px;
@shop-border-radius-md: 9px;

@shop-price-color: #FF5B11;

@shop-bg-color: #F4F4F6;

@shop-font-size-sm: 11px;
@shop-font-size: 13px;
@shop-font-size-md: 16px;
@shop-font-size-mmd: 18px;
@shop-font-size-lg: 24px;

.shop-border-line() {
    position: relative;
    &::after {
        height: 1px;
        background-color: @border-color;
        position: absolute;
        bottom: 0;
        left: @shop-bag-gap;
        right: @shop-bag-gap;
        content: '';
    }
}

.shop-border-line(@color, @left, @right) {
    position: relative;
    &::after {
        height: 1px;
        background-color: @color;
        position: absolute;
        bottom: 0;
        left: @left;
        right: @right;
        content: '';
    }
}

.shop-border-line-top() {
    position: relative;
    &::after {
        height: 1px;
        background-color: @border-color;
        position: absolute;
        top: 0;
        left: @shop-bag-gap;
        right: @shop-bag-gap;
        content: '';
    }
}

.shop-border-line-top(@color, @left, @right) {
    position: relative;
    &::after {
        height: 1px;
        background-color: @color;
        position: absolute;
        top: 0;
        left: @left;
        right: @right;
        content: '';
    }
}

.shop-boxshadow() {
    box-shadow: 0px 4px 16px -4px rgba(51, 51, 51, 0.06);
    &.balck {
        box-shadow: none;
    }
}